National Center for Supercomputing Applications
A Beginner's Guide to HTML

Troubleshooting

Avoid Overlapping Tags

Consider this snippet of HTML: 

    <B>This is an example of <DFN>overlapping</B> HTML tags.</DFN>

The word "overlapping'' is contained within both the <B> and <DFN> tags. How does the browser format it? You won't know until you look, and different browsers will likely react differently. In general, avoid overlapping tags.  

Embed Anchors and Character Tags, But Nothing Else

It is acceptable to embed anchors within another HTML element: 

    <H1><A HREF = "Destination.html">My heading</A></H1>

Do not embed a heading or another HTML element within an anchor: 

    <A HREF = "Destination.html">
    <H1>My heading</H1>
    </A>

Although most browsers currently handle this example, it is forbidden by the official HTML and HTML+ specifications, and will not work with future browsers.  

Character tags modify the appearance of other tags: 

    <UL><LI><B>A bold list item</B>
        <UL>
        <LI><I>An italic list item</I>
    </UL>

However, avoid embedding other types of HTML element tags. For example, it is tempting to embed a heading within a list, in order to make the font size larger:  

    <UL><LI><H1>A large heading</H1>
        <UL>
        <LI><H2>Something slightly smaller</H2>
    </UL>

Although some browsers, such as NCSA Mosaic for the X Window System, format this construct quite nicely, it is unpredictable (because it is undefined) what other browsers will do. For compatibility with all browsers, avoid these kinds of constructs.  

What's the difference between embedding a <B> within a <LI> tag as opposed to embedding a <H1> within a <LI>? This is again a question of SGML. The semantic meaning of <H1> is that it's the main heading of a document and that it should be followed by the content of the document.Thus it doesn't make sense to find a <H1> within a list.  

Character formatting tags also are generally not additive. You might expect that 

    <B><I>some text</I></B>

would produce bold-italic text. On some browsers it does; other browsers interpret only the innermost tag (here, the italics).  

Check Your Links

When an <IMG> tag points at an image that does not exist, a dummy image is substituted. When this happens, make sure that the referenced image does in fact exist, that the hyperlink has the correct information in the URL, and that the file permission is set appropriately (world-readable).  

back to External Images, Sounds, and Animations
on to A Longer Example
return to Beginner's Guide  Contents.